<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP '1.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<%@include file="/jsp/base.jsp"%>
	
	<script type="text/javascript">
	
		$(function(){
			var plists = $("#plist").val().split(",");
			//新打开dialog AppendTo方法
			function appendTo(dest){
				var all_height=$("tr").eq(0).height();
				var height=250;
				var width=$(window).width() * 0.95;// 获取iframe80%宽度
				var position;
				var alls = plists;
				for(var i=0;i<alls.length;i++){
					var t = $("#"+alls[i]).dialog("isOpen");
					if(t){
						height = parseInt($("#"+alls[i]).dialog("option","height"));
						width = $("#"+alls[i]).dialog("option","width");
						all_height = height + all_height;
						position = $("#"+alls[i]).dialog("option","position");
					
					}
				}
				$("#" + dest).dialog("option","width",width);
				$("#" + dest).dialog("option","height",height);
				
				//dialog的position值
				if(!position){
					$("#" + dest).dialog("option","position",[0,all_height]);
				}else {
					$("#" + dest).dialog("option","position",[0,all_height]);
				}
			}
		
			
			//初始化ISETdialog
			initIsetDialog();
			//初始化dialog
			for(var i=0;i<plists.length;i++){
				var part = plists[i];
				initDialog(part);
			}
			
			// 点击checkbox生成已加载曲线图的dialog
			$(":checkbox").click(function(){
				$("input[name=part]").each(function(){
					var part = $(this);
					var part_value = part.val();
					if(part.prop("checked")){
						if(!$("#"+ part_value).dialog("isOpen")){
							ajaxData(part_value);
							appendTo(part_value);
							$("#"+ part_value).dialog("open");
						}
					}else{
						$("#"+ part_value).dialog("close");
					}
				});
			});
			//初始化设置曲线图
			function initIsetDialog(){
				$("#iset").dialog({
					autoOpen:false,
					show: {
				        effect: "blind",
				        duration: 1000
				      },
				      hide: {
				        effect: "blind",
				        duration: 1000
				      },
				      width:200,
				      height:150,
				});
			}
			
			function openIsetDialog(part){
				var part = part;
				var w = $("#"+part).dialog("option","width");
				var h = $("#"+part).dialog("option","height");
				
				//将该dialog的高，宽设置在isetdialog的文本框中使操作人员更直观的设置
				$("#iwidth").val(w);
				$("#iheight").val(h);
				
				$("#iset").dialog("open");
				$("#iset").dialog("option","buttons",[{text:"确认设置",click:function(){
					var width = $("#iwidth").val();
					var height = $("#iheight").val();
					$("#"+part).dialog("option","width",width);
					$("#"+part).dialog("option","height",height);
					$("#iset").dialog("close");
				}}]);
			}
			
			//初始话曲线图dialog
			function initDialog(part){
				var part = part;
				$("#"+part).dialog({
					autoOpen:false, 
					show : {
						effect: "blind",
						duration: 1000	
					},
					hide : {
						duration: 1000,
					},
					close:function(){	
						$("input[name=part]").each(function(){
							var part_value = $(this).val();
							if(part_value == part){
								$(this).attr("checked",false);
							}
						})
						//找到该dialog后面的dialog，循环减去改dialog的height
						findAfter(part);
					},
					width : 650,
					height : 450,
					buttons:{
						"设置":function(){
									//弹出设置按钮
									openIsetDialog(part);
							   },
					}
				});
			}
			
			//找到找到该dialog后面的dialog集合
			function findAfter(dest){
				var position_y = $("#"+dest).dialog("option","position")[1];
				var height = $("#"+dest).dialog("option","height");
				for(var i=0;i<plists.length;i++){
					var isOpen = $("#"+plists[i]).dialog("isOpen");
					if(isOpen){
						position = $("#"+plists[i]).dialog("option","position");
						if(parseInt( position[1]) > parseInt( position_y)){
							 $("#"+plists[i]).dialog("option","position",[position[0],parseInt(position[1])-parseInt(height)]);
						}
					}
				}
			}
			
			var chart;
		
			function ajaxData(part){
				var data2 = [];
				$.post("data!getHV",function(data){
					var jsons = eval("(" + data + ")");
					 $.each(jsons,function(i,items){
						data2.push([parseInt(items.cpu)]);
					 });
	                draws(part,data2);
				});
			};
			
			var draws = function createHighchats(part,data2){
				//动态时part应为json数据
				chart = new Highcharts.Chart({
				  	chart: {
                            renderTo: part,        //在哪个区域呈现，对应HTML中的一个元素ID
                        },
		            title: {
		                x: -20 //center
		            },
		            xAxis: {
		                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
		                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
		            },
		            yAxis: {
		                title: {
		                    text: '%'
		                },
		                plotLines: [{
		                    value: 0,
		                    width: 1,
		                    color: '#808080'
		                }]
		            },
		            tooltip: {
		                valueSuffix: '%'
		            },
		            legend: {
		                layout: 'vertical',
		                align: 'center',
		                verticalAlign: 'bottom',
		                borderWidth: 0
		            },
		             series: [{
                            name: '利用率',
                            data:data2
                        }]
		        });
			};
			
			$("#pic").click(function(){
				$(".part").toggle();
				$(".ilayout").hide();
			});
				
			$("#layout").click(function(){
				$(".ilayout").toggle();
				$(".part").hide();
			});
			
			//布局
			$(":radio").click(function(){
				var column = $("input[name='ilayout']:checked").val();
				reLayout(column);
			});
			
			function reLayout(column){
				var totalWidth = $(window).width() * 0.95;
				var columnWidth = totalWidth / column;
				var position_x=0;
				var position_y=$("tr").eq(0).height();
				var dialogHeight = 250;
				var intervalWidth =  $(window).width() - totalWidth;
				var openedNum = 1;
				for(var i=0;i<plists.length;i++){
					if($("#"+plists[i]).dialog("isOpen")){
						$("#"+plists[i]).dialog("option","width",columnWidth);
						$("#"+plists[i]).dialog("option","height",dialogHeight);
						if(openedNum <= column){
							$("#"+plists[i]).dialog("option","position",[position_x,position_y]);
							position_x = position_x + columnWidth + intervalWidth;//x轴向右偏移
							openedNum++;
						}else {
							openedNum = 1;//换行，计数重置
							position_x = 0;//换行，x轴偏移重置
							position_y = position_y + dialogHeight;//换行，y轴偏移增加
							$("#"+plists[i]).dialog("option","position",[position_x,position_y]);
						}
					}
				}
			}
		});
	</script>
  </head>
  <body>
  		<input type="hidden" id="plist" value="cpu,rom,disk" />
  		<div id="iset" title="设置">
  			高<input type="text" id="iheight" size="4"><br>
  			宽<input type="text" id="iwidth" size="4"><br>
  		</div>
  		<div id="cpu" title="CPU"></div>
  		<div id="rom" title="ROM"></div>
  		<div id="disk" title="DISK"></div>
  		<table >
  			<tr id="ps" height="75" >
  				<button id="pic">图形</button>
				<button id="layout">布局</button>
				<div class="part" style="display: none">
					<input name="part" type="checkbox" value="cpu">CPU
					<input name="part" type="checkbox" value="rom">ROM
					<input name="part" type="checkbox" value="disk">DISK
				</div>
				<div class="ilayout" style="display: none">
					<input type="radio" name="ilayout" value="1">还原
					<input type="radio" name="ilayout" value="2">一排两列
				</div>
  			</tr>
  		</table>
  		
  </body>
</html>
